<template>
	<div class="wy-main user-auth-personal">
		<a-form :form="form" @submit="handleSubmit" class="wy-form">
			<a-form-item v-bind="formItemLayout"  label="登   录   名">
				<a-input maxlength="48" disabled v-decorator="['username', {rules: [{ required: true, message: '登录名不能为空!' }]}]" placeholder='请填写' />
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="手机号码">
				<a-input disabled v-decorator="['mobile', {rules: [{ required: true, message: '手机号码不能为空!' },{validator: checkMobile}]}]" placeholder='请填写' />
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="真实姓名">
				<a-input disabled onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" v-decorator="['nickName', {rules: [{ required: true, message: '真实姓名不能为空!' }]}]" placeholder='请填写' />
<!--				<a-input onkeyup="value=value.replace(/[\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" v-decorator="['nickName', {rules: [{ required: true, message: '真实姓名不能为空!' }]}]" placeholder='请填写' />-->
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="证件类型">
				<!--<a-input v-decorator="['certificatesType', {rules: [{ required: true, message: '证件类型不能为空!' }]}]" placeholder='请选择' />-->
				<a-select style="width: 280px;"  v-decorator="[ 'certificatesType', {rules: [{ required: true, message: '证件类型不能为空!' }]}]" placeholder="请选择证件类型">
					<a-select-option value="9">身份证</a-select-option>
					<a-select-option value="10">护照</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="证件号码">
				<a-input v-decorator="['certificatesNo', {rules: [{ required: true, message: '证件号码不能为空!' },{validator: checkCardId}]}]" placeholder='请填写' />
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="电子邮箱">
				<a-input v-decorator="['email', {rules: [{ required: true, message: '电子邮箱不能为空!' },{validator: checkMail}]}]" placeholder='请选择' />
			</a-form-item>
			<!-- <a-form-item v-bind="formItemLayout" label="固定电话">
				<a-input v-decorator="['landline', {rules: [{ required: true, message: '固定电话不能为空!' }]}]" placeholder='请填写' />
			</a-form-item> -->
			<!-- <a-form-item v-bind="formItemLayout" label="QQ">
				<a-input v-decorator="['qq', {rules: [{ required: true, message: 'QQ不能为空!' }]}]" placeholder='请填写' />
			</a-form-item> -->
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="证件照片" class="upzjimg">

				<a-upload name="file" listType="picture-card" class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
					<div class="img_zz" v-if="Positive_img">
						<div class="img_zz_text">
							<a-icon style="font-size: 30px;" :type="zhenLoading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								请上传正确的身份证扫描件<span style="color: red;">正面</span> 否则影响后期业务办理 图片格式：jpg.jpeg.png
							</div>
						</div>
						<div class="img_zz_d"></div>
					</div>
					<img v-if="Positive_img" :src="Positive_img" alt="avatar" />
					<div class="up_img_d" v-if="!Positive_img">
						<a-icon style="font-size: 30px;" :type="zhenLoading ? 'loading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;">
							请上传正确的身份证扫描件<span style="color: red;">正面</span> 否则影响后期业务办理 图片格式：jpg.jpeg.png
						</div>
					</div>
				</a-upload>
				<a-upload v-decorator="['shengfenzheng', {rules: [{ required: true, message: '证件照片正反面不能为空!' }]}]" name="file" listType="picture-card" class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Back_Change">
					<div class="img_zz" v-if="Back_img">
						<div class="img_zz_text">
							<a-icon style="font-size: 30px;" :type="fanLoading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								请上传正确的身份证扫描件<span style="color: red;">反面</span> 否则影响后期业务办理 图片格式：jpg.jpeg.png
							</div>
						</div>
						<div class="img_zz_d"></div>
					</div>
					<img v-if="Back_img" :src="Back_img" alt="avatar" />
					<div class="up_img_d" v-if="!Back_img">
						<a-icon style="font-size: 30px;" :type="fanLoading ? 'loading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;">
							请上传正确的身份证扫描件<span style="color: red;">反面</span> 否则影响后期业务办理 图片格式：jpg.jpeg.png
						</div>
					</div>
				</a-upload>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="荣誉/资质" class="upzjimg">
				<a-upload name="file" :action="uploadUrl" listType="picture-card" class="up_img" :fileList="fileList" @preview="handlePreview" @change="handleChange">
					<div v-if="fileList.length < 6" class="up_img_d">
						<a-icon style="font-size: 30px; color: #fff; padding: 10px; border-radius: 50%; background: #15837A;" :type="rongyuLoading ? 'loading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;"><b>点击加号可继续添加荣誉</b></div>
					</div>
				</a-upload>
				<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
					<img alt="example" style="width: 100%" :src="previewImage" />
				</a-modal>
			</a-form-item>
			<a-row style="margin-top: 10px;">
				<a-col :span="24">
					<p style="margin: 0;">
						<a-divider style="width: 95%;margin-left: 20px;" />
					</p>
				</a-col>
			</a-row>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="协议" class="wy-agreement"  >
				<a-checkbox v-decorator="['agreement',{ rules: [ {required: true,pattern: /true/, message: '请阅读并接受',}]}]">
					我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a>
				</a-checkbox>
			</a-form-item>

			<div class="ant-row ant-form-item">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-button type="primary" html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
								立即认证
							</a-button>
						</span>
					</div>
				</div>
			</div>
			<!--<a-checkbox style="margin-left: 40px;" v-decorator="['agreement', {valuePropName: 'checked'}]">
				本人保证: 以上填写内容和材料附件真实无误，若填写或提供任何错误、不实或不完整的资料导致发生任何经济及法律纠纷， 本人愿承担一切责任！
			</a-checkbox>
			<a-form-item style="text-align: center;margin-top: 20px;">
				<a-button type="primary" html-type="submit" style="width: 200px;">
					立即认证
				</a-button>
			</a-form-item>-->
		</a-form>
		<a-modal  :visible="webShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<web @close="close" v-if="webShow" @cancel="close"></web>
		</a-modal>
		<a-modal  :visible="userShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<user @close="close" v-if="userShow" @cancel="close"></user>
		</a-modal>
	</div>
</template>
<script>
	import { mapState,mapMutations } from 'vuex'
	import { environment } from '@/environments/environment'
	import {checkTel, checkTelNum, checkEmail,checkCardNo} from 'utils/formValidate'
	import Web from '@/components/tool/web'
	import User from '@/components/tool/user'
	function getBase64(img, callback) {
		const reader = new FileReader()
		reader.addEventListener('load', () => callback(reader.result))
		reader.readAsDataURL(img)
	}
	export default {
		components: {
			Web,
			User
		},
		data() {
			return {
				webShow:false,
				userShow:false,
				userdata: '',
				loading: false,
				zhenLoading: false,
				fanLoading: false,
				rongyuLoading: false,
				FILEUPLOADURL: environment.FileUploadUrl2,
				uploadUrl: environment.FileUploadUrl+'/fileupload/upload',// 图片上传地址
				// uploadUrl: 'http://10.23.118.71:9527/api/fileupload/upload', // 图片上传地址
				Positive_img: '', // 正面图片
				Back_img: '', // 背面图片
				qualificationsJpg: '', // 资质图片名
				qualificationsPath: '', // 资质图片目录


				cardPicFace: '', // 身份证正面
				cardPicAddr: '', // 身份证反面
				cardPicFacePath: '', // 身份证正面存放目录
				cardPicAddrPath: '', // 身份证反面存放目录

				previewVisible: false,
				previewImage: '',
				fileList: [],
				uploadList: [],
				loading: false,
				imageUrl: '',
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 4
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 8
						},
					},
				},
				tailFormItemLayout: {
					wrapperCol: {
						xs: {
							span: 24,
							offset: 16,
						},
						sm: {
							span: 12,
							offset: 2,
						},
					},
				},
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {
			this.getuserinfo()
		},
		methods: {
			// 关闭协议弹窗
			close(){
			    this.webShow=false;
				this.userShow=false;
			},
			// 验证身份证号
			checkCardId:checkCardNo,
			// 校验手机号
			checkMobile:checkTel,
			// 校验邮箱
			checkMail:checkEmail,
			// 上传证件
			beforeUpload(file) {
				console.log(file.type)
				if(file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/jpg'){
					return true
				}else{
					this.$message.error('请选这正确的图片格式!')
					return false
				}
			},
			// 上传背面照片
			Back_Change(info) {
				console.log(info, 666)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Back_img = this.FILEUPLOADURL + info.file.response.data.certifJpgFile
					this.cardPicAddr = info.file.response.data.certificatesjpg
					this.cardPicAddrPath = info.file.response.data.certificatesPath
					this.loading = false
				}
			},
			// 上传正面照片
			Positive_Change(info) {
				console.log(info, 9889)
				if(info.file.status === 'uploading') {
					this.zhenLoading = true
					return
				}
				if(info.file.status === 'done') {
					this.Positive_img = this.FILEUPLOADURL + info.file.response.data.certifJpgFile
					this.cardPicFace = info.file.response.data.certificatesjpg
					this.cardPicFacePath = info.file.response.data.certificatesPath
					this.zhenLoading = false
				}
			},
			// 上传荣誉照片
			handleChange({fileList}) {
//				console.log(fileList)
//				for(var i in fileList) {
//					if(fileList[i].status === 'done') {
//						fileList[i].url = fileList[i].response.data.certifJpgFile
//					}
//				}
//				console.log(this.qualificationsJpg, 898989)
//				this.fileList = fileList
				console.log(fileList)
				for(var i in fileList){
					if(fileList[i].type != 'image/jpeg' && fileList[i].type != 'image/png' && fileList[i].type != 'image/jpg'){
						this.$message.error('请选这正确的图片格式!')
						return
					}
		    	}
		    	let certificatesPath = [];
		    	let certificatesjpg = [];
		    	for(var i in fileList){
		    		if(fileList[i].status === 'done'){
		    			fileList[i].url =this.FILEUPLOADURL+fileList[i].response.data.certifJpgFile
						fileList[i].certificatesPath = fileList[i].response.data.certificatesPath;
						fileList[i].certificatesjpg = fileList[i].response.data.certificatesjpg;
		    		}
		    	}
		      	this.fileList = fileList
		      	console.log(this.fileList)
			},
			handleCancel() {
				this.previewVisible = false
			},
			handlePreview(file) {
				this.previewImage = file.url || file.thumbUrl
				this.previewVisible = true
			},

			getuserinfo() {
				this.$get('/userDetail/' + this.user.username)
					.then((r) => {
						console.log(r, 8989)
						var d = r.data.data
						this.userdata = d
						this.form.setFieldsValue({
							username: d.username,
							mobile: d.mobile,
							nickName: d.nickName,
							email: d.email,
							certificatesType: d.certificatesType || '9',
							certificatesNo: d.certificatesNo,
							// landline: d.landline,
							// qq: d.qq,
						});
		            	if (d.cardPicFace) {
							this.Positive_img = this.FILEUPLOADURL + d.cardPicFacePath + d.cardPicFace
							this.cardPicFace = d.cardPicFace
							this.cardPicFacePath = d.cardPicFacePath
						}

						if (d.cardPicAddr) {
							this.Back_img = this.FILEUPLOADURL  + d.cardPicAddrPath + d.cardPicAddr
							this.cardPicAddr = d.cardPicAddr
							this.cardPicAddrPath = d.cardPicAddrPath
							this.form.setFieldsValue({
								'shengfenzheng': d.cardPicAddrPath
							})
						}
						if(d.qualificationsJpg){
							let arr = d.qualificationsJpg.split(',');
							let arr2 = d.qualificationsPath.split(',');
							for (let j = 0;j<arr.length;j++) {
								this.fileList.push({
									uid: -j,
									status:'done',
									response:{
										data:{
											certifJpgFile:arr2[j]+arr[j],
											certificatesPath:arr2[j],
											certificatesjpg:arr[j]
										}
									},
									url: this.FILEUPLOADURL+arr2[j]+arr[j],
									name:arr[j]
								})
							}
						}
					}).catch((e) => {
						// console.log(e, 8989)
					})
			},
			// 认证提交
			handleSubmit(e) {

				if(this.loading) return;
				console.log(e)
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						this.loading = true;
						values.roleId = this.userdata.roleId
						values.userId = this.userdata.userId
						values.deptId = this.userdata.deptId
						values.status = this.userdata.status
						// values.ssex = this.userdata.ssex
						values.certificatesjpg = this.certificatesjpg
						values.certificatesPath = this.certificatesPath

						values.cardPicFace = this.cardPicFace
						values.cardPicAddr = this.cardPicAddr
						values.cardPicFacePath = this.cardPicFacePath
						values.cardPicAddrPath = this.cardPicAddrPath

						if(this.fileList){
							var qualificationsJpg = []
							var qualificationsPath = []
							for(var i in this.fileList){
								qualificationsJpg.push(this.fileList[i].certificatesjpg);
								qualificationsPath.push(this.fileList[i].certificatesPath);
							}
							values.qualificationsJpg = String(qualificationsJpg)
							values.qualificationsPath = String(qualificationsPath)
						}
						values.type = 1
						// values.approvalStatus = 1
						values.attestationStatus = 110
						console.log('Received values of form: ', values);
						var _this = this
						this.$put('/userDetail', values, true).then((r) => {
							console.log('userDetail put:', r)
							if(r.data.code == '0000') {
//								this.$message.success('个人认证已提交！')
//								this.saveLoginData(r.data.data)
//								this.$router.push('/')
								this.$success({
							        title: '提示',
							        content: (  // JSX support
							          <div>
							          	  您的个人认证已提交，可在认证状态中查询认证审核进度!
							          </div>
							        ),
							        onOk() {
							        	_this.$router.push('/')
							        },
							    });
							}else{
								this.$message.error(r.data.message)
							}
							this.loading = false;
						}).catch((e) => {
							this.loading = false;
						})
					}
				});
			},
		    ...mapMutations({
		      setPermissions: 'account/setPermissions',
		      setRoles: 'account/setRoles',
		      setUser: 'account/setUser'
		    }),
		    saveLoginData (data) {
		      this.setUser(data.user)
		      this.setPermissions(data.permissions)
		      this.setRoles(data.roles)
		    }
		},
		computed: {
			...mapState({
				multipage: state => state.setting.multipage,
				user: state => state.account.user,
			}),
		},
	}
</script>

<style lang="less">
	.user-auth-personal {
		margin-top: 20px;
		.upzjimg {
			.ant-upload {
				padding: 0;
			}
			.ant-upload-list-picture-card .ant-upload-list-item {
				width: 216px;
				height: 216px;
			}
			.ant-upload.ant-upload-select-picture-card {
				border: 1px solid #d9d9d9;
			}
			.up_img {
				float: left;
				position: relative;
				.ant-upload.ant-upload-select-picture-card{
					width: 216px;
					height: 216px;
				}
				img {
					width: 200px;
					height: 200px;
				}
				.up_img_d {
					width: 200px;
					height: 200px;
					padding: 55px 10px 10px 10px;
				}
				.img_zz {
					width: 216px;
					height: 216px;
					position: absolute;
					color: #fff;
					top: 0;
					left: 0;
					.img_zz_text {
						position: absolute;
						z-index: 10;
						padding: 55px 10px 10px 10px;
					}
					.img_zz_d {
						position: absolute;
						width: 216px;
						height: 216px;
						background: #000;
						opacity: 0.6;
					}
				}
			}
		}
	}
</style>